const gulp = require('gulp');
// scss加载器  sass 转 css
const sass = require('gulp-sass');
// 重新命名文件
const rename = require('gulp-rename')
// 只编译改动过的文件
const changed = require('gulp-changed')
// 监听文件
const watcher = require('gulp-watch');
// 自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题
const autoprefixer = require('gulp-autoprefixer');
// 压缩css代码（第一种压缩方案，会把 @import 的文件内容也打包进来）
const cleanCSS = require("gulp-clean-css");
// 压缩css代码（第二种压缩方案，会把 @import 的文件内容也打包进来）
const mincss = require('gulp-mini-css');
// 压缩css代码（第三种压缩方案，不会把 @import 的文件内容也打包进来）
const cssnano = require('gulp-cssnano');
// 用来处理当前执行的文件
const tap = require('gulp-tap');
// gulp-replace负责内容的替换
const replace = require('gulp-replace');
// 负责清除我们不需要的文件
const clean = require('gulp-clean');
const path=require('path');

const config={
  // 过滤不要重新打包的文件 'common.scss'
  // 设置到这里的文件，会加剧wxss的打包体积
  cssFilterFiles: [],
}

const hasRmCssFiles = new Set();

function compileScss() {
  return gulp.src('./pages/**/*.scss') //需要编译的文件
    .pipe(tap((file) => {
      // 当前处理文件的路径
      const filePath = path.dirname(file.path);
      // 当前处理内容
      const content = file.contents.toString();
      // 找到filter的scss，并匹配是否在配置文件中
      content.replace(/@import\s+['|"](.+)['|"];/g, ($1, $2) => {
        const hasFilter = config.cssFilterFiles.filter(item => $2.indexOf(item) > -1);
        // console.log($1, $2,hasFilter)
        // hasFilter > 0表示filter的文件在配置文件中，打包完成后需要删除
        if (hasFilter.length > 0) {
          const rmPath = path.join(filePath, $2);
          // console.log(rmPath)
          // 将src改为dist，.scss改为.wxss，例如：'/xxx/src/scss/const.scss' => '/xxx/dist/scss/const.wxss'
          const filea = rmPath.replace(/\.scss/, '.wxss');
          // 加入待删除列表
          hasRmCssFiles.add(filea);
        }
      });
      // console.log('rm', hasRmCssFiles);
    }))
    .pipe(replace(/(@import.+;)/g, ($1, $2) => {
      const hasFilter = config.cssFilterFiles.filter(item => $1.indexOf(item) > -1);
      // console.log($1, $2,hasFilter)
      if (hasFilter.length > 0) {
        return $2;
      }
      return `/** ${$2} **/`;
    }))
    .pipe(sass({
      // "compact" | "compressed" | "expanded" | "nested"
      outputStyle: 'expanded' //展开输出方式 expanded
    }).on('error', sass.logError))
    .pipe(replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => {
      console.log($1, $2, $3)
      return $3.replace(/\.scss/g, '.wxss');
    }))
    .pipe(autoprefixer("last 3 version", "safari 5", "ie 8", "ie 9"))
    .pipe(rename((path) => {
      path.extname = '.wxss'
    }))
    .pipe(changed('./pages')) //只编译改动的文件
    .pipe(gulp.dest('./pages')) //写入文件
    .pipe(rename((path) => {
      console.log(path);
      const dateObj = new Date();
      const year = dateObj.getFullYear();
      const month = dateObj.getMonth() + 1;
      const date = dateObj.getDate();
      const hours = dateObj.getHours();
      const minutes = dateObj.getMinutes();
      const seconds = dateObj.getSeconds();
      const log = [];
      log.push('[' + year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds + ']');
      log.push('' + '编译完成文件：' + 'pages\\' + path.dirname + '\\' + path.basename + '.scss')
      console.log(log.join(' '))
    }))
}

// 压缩css代码
function minCss() {
  console.log('minCss');
  return gulp.src('./pages/**/*.wxss')
    // .pipe(cleanCSS())
    // .pipe(mincss())
    .pipe(cssnano())
    .pipe(gulp.dest('./pages'))
}

function cleanWxss(){
  const arr = ['./pages/**/*.wxss'];
  hasRmCssFiles.forEach((item) => {
    arr.push(item);
  });
  return gulp.src(arr, { read: false })
      .pipe(clean({ force: true }));
}

// 清理无用的wxss文件
gulp.task('clean:wxss', cleanWxss);

//自动监听
gulp.task('watch', gulp.series(function () {
  return watcher('./pages/**/*.scss', function () {
    return compileScss();
  });
}));

gulp.task('minWxss',minCss)

//手动编译
gulp.task('scss', gulp.series(cleanWxss,compileScss));

// 打包生产模式
gulp.task('build', gulp.series(cleanWxss,compileScss, minCss))

